<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>尺寸属性</title>
        <style>
            span{
                font-size:20em;
                color:rgba(23, 153, 94,.1);
            }
            /*尺寸属性：最大宽度与最小宽度，功能：【屏幕】自适应
            
            */
            div.container{
                background-color: #a5f7f7;
            }
            div.box{
                background-color:#ff0000;
                /*设置宽度*/
                width: 80%;
                /*最大宽度属性：页面最大宽度值，如果与width同时出现，以最大宽度值*/
                max-width: 500px;
                /*最小宽度属性:页面最小宽度值，达到最小值，页面内容不会被压缩
                宽度与最小宽度同时出现，宽度大于最小宽度，宽度值以大的为准
                宽度与最大宽度和最小宽度同时出现，宽度>最大宽度>最小宽度，宽度值以大的为准
                */
                min-width: 500px;
            }
        </style>
    </head>
    <body>
        <div class="container"></div>
        <div class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores quo, velit cum alias voluptas quibusdam quidem animi quam libero deleniti doloremque ad inventore voluptates sequi maiores, quas perferendis adipisci rem!
        </div>
        <!-- 常用样式单位
         1.针对尺寸：%百分比  、px  绝对值 像素、em 移动端（1em=当前字体的尺寸，2em=当前字体的两倍）
         2.针对颜色:网页三原色：红  绿  蓝，组成页面的任意颜色
         rgba(0~255,0~255,0~255,.)
         十六进制写法：#rrggbb  0~9 a~z A~Z 常用：#000000 #ffffff
         -->
         <span>lorem</span>
    </body>
</html>